<?php
$title="Nhà hàng Tây Bắc";

require '../layout/header.inc';
require_once('../lib/Modelsphp.php');
$f=new Modelsphp();
$db=$f->getCheckin();


?>
<link href="../css/slide.css" rel="stylesheet" type="text/css" />
<div id="slide">
     <script type="text/javascript" src="../s_slide/jquery-1.9.1.min.js"></script>
    <!-- use jssor.slider.mini.js (40KB) or jssor.sliderc.mini.js (32KB, with caption, no slideshow) or jssor.sliders.mini.js (28KB, no caption, no slideshow) instead for release -->
    <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
    <script type="text/javascript" src="../s_slide/jssor.core.js"></script>
    <script type="text/javascript" src="../s_slide/jssor.utils.js"></script>
    <script type="text/javascript" src="../s_slide/jssor.slider.js"></script>
    <script type="text/javascript" src="../scripts/slide.js"></script>

    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. --> 
  
    <div id="slider1_container" style="position: relative; width: 980px;
        height: 380px; overflow: hidden;  margin: 8px auto;">
        <style>
            /* this line can be removed, but it really helps in case of css conflicts in your page */
            .slider1 div { position: relative; margin: 0px; padding: 0px; }
        </style>
 
        <!-- Loading Screen --> 
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;

                background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;"> 
            </div> 
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;

                top: 0px; left: 0px;width: 100%;height:100%;">
            </div> 
        </div> 
 
        <!-- Slides Container --> 
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 980px; height: 380px;
            overflow: hidden;">
			<?php
			while($row=  mysqli_fetch_array($db))
				{
					$i=rand(1,7);
				

			?>
            <div>
                <img u="image" src="<?php echo $row['images'];?>" />
				
				
					<div u=caption t="CLIP|LR" du="1500" class="captionOrange"  style="position:absolute; left:20px; top: 30px; height:30px;"> 
						<div style="padding-left:10px;padding-right:10px;"> <?php echo $row['title'];?> </div>
					</div>
			
				<!-- <?php if($i==2) {?>
                <div u=caption t="L|IB" t2=L d=-900 class="captionBlack"  style="position:absolute; left:360px; top: 130px; width:60px; height:30px;"> 
                <?php echo $row['title'];?>
                </div> 
				<?php }?>
				
				<?php if($i==3) {?>
                <div u=caption t="RTT|360" d=-200 class="captionBlack"  style="position:absolute; left:360px; top: 180px; width:60px; height:30px;"> 
                <?php echo $row['title'];?>
                </div>
				<?php }?>
				
				<?php if($i==4) {?>
                <div u=caption t="DDGDANCE|RB" t2="RTT|10" d=-1800 du=3800 class="captionOrange" style="position:absolute; left:560px; top: 110px; width:200px; height:120px; text-align: left;">
                   <?php echo $row['title'];?>
                </div>
				<?php }?>
				
				<?php if($i==5) {?>
                <div u=caption t="T|IE*IE" d=-1600 du=3800 t2="B" class="captionOrange" style="position:absolute; left:20px; top: 310px; width:330px; height:30px;">
                    <?php echo $row['title'];?>
                </div>
				<?php }?>
				<?php if($i==6) {?>
                <div u="caption" t="ZMF|10" t2="B" d=-1300 style="position:absolute;left:420px;top:280px;width:90px;height:40px;font-size:15px;color:#fff;line-height:40px;">
				<?php echo $row['title'];?>
				</div>
				<?php }?>
				
				<?php if($i==7) {?>
                <div u="caption" t="CLIP|L" d=-300 style="position:absolute;left:520px;top:280px;width:160px;height:40px;font-size:15px;color:#fff;line-height:40px; text-align: center;">
				<?php echo $row['title'];?></div>	<?php }?> -->
                <a class="captionOrange" u="caption" t="CLIP|L" d=-300 href="../book/book.php" style="position:absolute;left:800px;top:320px;width:100px;height:40px;font-size:20px;color:#fff;line-height:40px;">Đặt hàng</a>
            </div>
            <?php 
			}
			?>
            
           
               

            <!-- Example to add fixed static share buttons in slider BEGIN -->
            <!-- Remove it if no need -->
            <!-- Share Button Styles -->
            
            
            <!-- Example to add fixed static share buttons in slider END -->

            <!-- Example to add fixed static QR code in slider BEGIN -->
            <!-- Remove it if no need -->
            <!-- QR Code Style -->
            <style>
                @media only screen and (max-width: 980px) {
                    .qr_code {
                        display: none;
                    }
                }
            </style>
        <!--    <img u="any" class="qr_code" src="../img/qr/jssor.com.png" style="position: absolute; width: 80px; height: 80px; bottom: 20px; right: 20px; opacity: .5; filter: alpha(opacity=50);" />
             Example to add fixed static QR code in slider END -->
        </div> 
 
        <!-- Bullet Navigator Skin Begin -->
        <style>
            /* jssor slider bullet navigator skin 03 css */
            /*
            .jssorb03 div           (normal)
            .jssorb03 div:hover     (normal mouseover)
            .jssorb03 .av           (active)
            .jssorb03 .av:hover     (active mouseover)
            .jssorb03 .dn           (mousedown)
            */
            .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
            {
                background: url(../img/b03.png) no-repeat;
                overflow:hidden;
                cursor: pointer;
            }
            .jssorb03 div { background-position: -5px -4px; }
            .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
            .jssorb03 .av { background-position: -65px -4px; }
            .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb03" style="position: absolute; bottom: 16px; left: 6px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="POSITION: absolute; WIDTH: 21px; HEIGHT: 21px; text-align:center; line-height:21px; color:White; font-size:12px;"><NumberTemplate></NumberTemplate></div>
        </div>
        <!-- Bullet Navigator Skin End -->
        
        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 20 css */
            /*
            .jssora20l              (normal)
            .jssora20r              (normal)
            .jssora20l:hover        (normal mouseover)
            .jssora20r:hover        (normal mouseover)
            .jssora20ldn            (mousedown)
            .jssora20rdn            (mousedown)
            */
            .jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(../img/a20.png) no-repeat;
                overflow:hidden;
            }
            .jssora20l { background-position: -3px -33px; }
            .jssora20r { background-position: -63px -33px; }
            .jssora20l:hover { background-position: -123px -33px; }
            .jssora20r:hover { background-position: -183px -33px; }
            .jssora20ldn { background-position: -243px -33px; }
            .jssora20rdn { background-position: -303px -33px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora20l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora20r" style="width: 55px; height: 55px; top: 123px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com" >responsive carousel</a>
    </div> 
    <!-- Jssor Slider End --> 
</div>
<?php
	$db=$f->getContentPresentById();
	$row=mysqli_fetch_array($db);

 ?>
<div class="present">
	<div class="img_present">
		<img src="<?php echo $row['images']; ?>" alt="<?php echo $row['title']; ?>"/>
	</div>
	<div class="content_present">
		<div class="title_present">
		<?php echo $row['title']; ?>
		</div>
		<div class="art_present">
			<?php echo $row['introtext']; ?>
		</div>
	</div>

</div>

<style>
.present
{
	 border: 1px solid #724923;
    display: table;
  
    
    margin-top: 10px;
   
    width: 100%;
}
.img_present
{
	width:200px;
	padding:10px;
	float:left;
}
.img_present img
{
	max-width:200px;
	width:100%;
}
.content_present
{
	width:70%;
	float:left;
	padding:10px 10px;
}
.title_present
{
	font-weight:bold;
}
.art_present
{
	art_present:normal;
}
</style>
<?php
require '../layout/footer.inc';



?>
